<script lang="tsx" setup>
/**
 * 操作栏
 */
import {defineSheetForm, SheetForm} from "../../../../index.ts"
import {ref} from "vue"
import ElsForm from "./components/els-form/index.vue"

/**
 * 表单实例
 */
const sheetFormRef = ref()
const sheetForm = defineSheetForm<any>({
  labelWidth: "90px",
  els: [
    {
      label: "长度",
      eType: "el-input-number",
      prop: "width",
      props: {
        precision: 0
      },
      style: {
        width: "100%"
      }
    },
    {
      label: "样式",
      eType: "el-input",
      prop: "props",
      props: {
        type: "textarea"
      }
    },
    {
      label: "绑定数据前",
      eType: "el-input",
      prop: "beforeSubmit",
      props: {
        type: "textarea"
      }
    },
    {
      label: "绑定数据后",
      eType: "el-input",
      prop: "beforeSubmit",
      props: {
        type: "textarea"
      }
    },
    {
      label: "渲染列表",
      renderFn(data) {
        /**
         * 修改
         */
        const handleChange = (value: any) => {
          data.els = value
        }

        return <ElsForm els={data.els} onChange={handleChange}/>
      }
    }
  ]
})

/**
 * 获取数据
 */
const getFormData = async () => {
  return await sheetFormRef.value.getFormData()
}

/**
 * 设置数据
 */
const setFormData = (value: any) => {
  sheetFormRef.value.setFormData(value)
}

/**
 * 暴露
 */
defineExpose({
  getFormData,
  setFormData
})
</script>

<template>
  <SheetForm ref="sheetFormRef" :SheetFormModel="sheetForm"/>
</template>

<style lang="scss" scoped>

</style>